<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版涂鸦板</title>
</head>

<body>
    <div style="text-align: center;">
        <canvas id="canvasElem">
            
        </canvas>
        <footer>WYH 2023/11/10</footer>
    </div>

    <script>
        var canvas = document.getElementById('canvasElem');
        var context = canvas.getContext('2d');
        canvas.width = 980;
        canvas.height = 600;
        canvas.style.border = '1px solid #aaa';
        // 鼠标按下出发事件
        canvas.onmousedown = function(e) {
            // console.log(canvas.getBoundingClientRect());
            // console.log(e.clientX, e.clientY);

            var x = e.clientX - canvas.getBoundingClientRect().left; //画布坐标X
            var y = e.clientY - canvas.getBoundingClientRect().top; //画布坐标Y
            context.beginPath(); //开始规划路径
            context.moveTo(x, y); //定义画布中的起点位置

            // 鼠标移动，绘图
            canvas.onmousemove = function(event) {
                // console.log('绘图中...');

                var x = event.clientX - canvas.getBoundingClientRect().left; //画布坐标X
                var y = event.clientY - canvas.getBoundingClientRect().top; //画布坐标Y
                context.lineTo(x, y) // 设置端点
                console.log(x)
                context.stroke(); // 描边
            }

            // 鼠标松开停止绘图
            canvas.onmouseup = function() {
                canvas.onmousemove = null;
            }
        }
    </script>
</body>

</html>